<template>
  <div class="h100 container">
    <div id="container" style="height: 600px; width: 100%"></div>
    <div class="top">
      <el-input v-model="val" placeholder="Please input" />

      <div class="date">
        <el-date-picker
          v-model="dateTime"
          type="date"
          placeholder="Pick a day"
        />
      </div>
    </div>
    <div v-show="flag" class="bottom">
      <el-card v-for="(item, index) in userStation" :key="index"  class="box-card">
        <template #header>
          <div class="card-header">
            <span>Card name</span>
            <el-button class="button" text>Operation button</el-button>
          </div>
        </template>
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="Consistency" name="1">
            <div>
              Consistent with real life: in line with the process and logic of
              real life, and comply with languages and habits that the users are
              used to;
            </div>
            <div>
              Consistent within interface: all elements should be consistent,
              such as: design style, icons and texts, position of elements, etc.
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-card>
    </div>
  </div>
</template>
<script setup>
window._AMapSecurityConfig = {
  securityJsCode: "3c9071f38684d62e1265cd6e02d18e1a",
};
import AMapLoader from "@amap/amap-jsapi-loader";
import { onMounted, ref, watch, watchEffect } from "vue";
import { getUserStation } from '@/api/orbitMonitoring'

const val = ref("");
const dateTime = ref("");
const flag = ref(false);
const userStation = ref([])

// console.log(getUserStation)
getUserStation().then(({ data }) => {
    userStation.value = data.data
})

const activeNames = ref([""]);
const handleChange = (val) => {
  console.log(val);
};

watch([val, dateTime], (newValue) => {
  const arr = [
    newValue[0],
    newValue[1] ? String(new Date(newValue[1]).getTime()) : "",
  ];
  console.log(arr)
  const collapseFlag = arr.some((item) => item.length > 0);
  if (collapseFlag) {
    flag.value = true;
  } else {
    flag.value = false;
  }
});

// 地图初始化
const init = () => {
  AMapLoader.load({
    key: "d57824277e306e35000d42ac5fcaeb91", //首次load必填
    version: "2.0",
    plugins: ["AMap.Driving", "AMap.DragRoute"],
    // AMapUI: {
    //     version: '1.1',
    //     plugins: ['overlay/SimpleMarker'],
    // }
  })
    .then((AMap) => {
      const map = new AMap.Map("container");
      let startLngLat = [116.379028, 39.865042];
      let endLngLat = [113.41, 29.58];

      const driving = new AMap.Driving({
        map: map,
        policy: AMap.DrivingPolicy.LEAST_TIME,
      });

      driving.search(startLngLat, endLngLat, function (status, result) {
        if (status === "complete") {
          console.log("绘制驾车路线完成");
        } else {
          console.log("获取驾车数据失败：" + result);
        }
      });

      map.addControl(driving);

      // const map = new AMap.Map("container", {
      //     resizeEnable: true
      // });
      // //绘制初始路径
      // var path = [];
      // path.push([116.303843, 39.983412]);
      // path.push([116.321354, 39.896436]);
      // path.push([116.407012, 39.992093]);
      // const route = new AMap.DragRoute({
      //     map,
      //     path,
      //     // policy: AMap.DrivingPolicy.LEAST_FEE
      // })

      // route.search()

      // map.addControl(route);

      // map.plugin("AMap.DragRoute", function() {
      //     const route = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_FEE); //构造拖拽导航类
      //     route.search(); //查询导航路径并开启拖拽导航
      // });
    })
    .catch((e) => {
      console.error(e);
    });
};

onMounted(() => {
  init();
});
</script>
<style scoped>
.container {
  position: relative;
}

.top {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
}

.bottom {
  position: absolute;
  top: 80px;
  padding-left: 20px;
  width: 360px;
}

.date {
  margin-left: 30px;
}
</style>
